<template>
    <div class="container">

<!--头部2张照片使用的定位-->
      <div class="left">
        <img src="../../assets/images/logo2.jpg">
      </div>

    <div class="right">
      <img src="../../assets/images/vx.png">
    </div>
      <!--      头部两张照片-->


<!--      头部header开始-->
     <div class="header">

<!--       菜单属性-->
       <el-menu
         :default-active="activeIndex2"
         class="el-menu-demo"
         mode="horizontal"
         @select="handleSelect"
         background-color="#e83e44"
         text-color="#f8e7ff"
         active-text-color="f8e7ff">
        <!--         第一个菜单项-->
         <el-menu-item index="1">  <a href="../../../static/Table.html">报表</a>  </el-menu-item>



         <el-menu-item index="2"> <a href="../../../static/map.html">Balance中国</a> </el-menu-item>

         <!--        第二个菜单项 我的工作台 第一级子级菜单-->
         <el-submenu index="3">

           <template slot="title" ><span style="font-size:18px !important;">工作台</span></template>
           <el-menu-item index="3-1">王科</el-menu-item>
           <el-menu-item index="3-2">陈佳兴</el-menu-item>
           <el-menu-item index="3-3">程家富</el-menu-item>
           <el-menu-item index="3-4"><router-link to="/login4">李啸天</router-link></el-menu-item>

         </el-submenu>

         <el-menu-item index="4"><a href="http://www.helensbar.com/" target="_blank">关于我们</a></el-menu-item>
       </el-menu>

     </div>

<!--      头部header结束-->

<!--body部分走马灯开始-->
      <div class="body">
      <el-carousel indicator-position="none" height="680px">
        <el-carousel-item v-for="item in imagesbox" :key="item.id">
          <img :src="item.idView" class="image">
        </el-carousel-item>
      </el-carousel>
      </div>
<!--      body部分走马灯结束-->

<!--      公司介绍开始-->
      <div class="company">
      <div class="company-introduce"><h1>品牌概况</h1></div>
        <div class="comBody">
      <p>Balance's 海伦司小酒馆，致力于打造年轻人的线下社交平台。
        第一家Balance's诞生于2019年，目前在北京、上海、广州、深圳、武汉、成都等90+城市，拥有直营门店380+家。</p>
      <p>在社交空间上，我们主打东南亚异域风情，采用了具有东南亚艺术元素和中国少数民族风格的装潢和内饰；产品组合上，我们以自有产品为主，
        外部产品为辅，并提供极具性价比的产品组合。通过高效、即时的服务，统一、潮流的音乐，为顾客带来自由、放松、快乐的夜生活。</p>
        </div>
      </div>
<!--   公司介绍结束   -->
<!--      产品介绍开始-->
<div class="product clearfix">

<div class="product-introduce">
  <h1>------ 产品介绍 ------</h1>
</div>

  <div class="item">
  <div class="img">
<img src="../../assets/images/two.png">
  </div>
<!--    引进路由进行跳转-->
    <p><router-link to="/Beer">啤酒</router-link></p>
  </div>


  <div class="item">
    <div class="img">
      <img src="../../assets/images/three.png">
    </div>
    <p><router-link to="/Dou">嗨斗</router-link></p>
  </div>


  <div class="item">
    <div class="img">
      <img src="../../assets/images/four.png">
    </div>
    <p><router-link to="/Snack">小吃</router-link></p>
  </div>


  <div class="item">
    <div class="img">
      <img src="../../assets/images/five.png">
    </div>
    <p><router-link to="/Wines">洋酒</router-link></p>
  </div>


  <div class="item">
    <div class="img">
      <img src="../../assets/images/six.jpg">
    </div>
    <p><router-link to="/Cocktail">鸡尾酒</router-link></p>
  </div>


  <div class="item">
    <div class="img">
      <img src="../../assets/images/one.png">
    </div>
    <p><router-link to="/Coke">可乐桶</router-link></p>
  </div>

</div>
<!--尾部footer开始-->
      <div class="footer ">
        <div class="leftbox">
          <h2>天津市Balance司品牌管理有限公司</h2>
          <h2>天津市Balance司企业管理有限公司</h2>
          <h4>天津津南合作区前湾一路1号A栋201室</h4>
          <h4>全国统一服务热线：400-860-7198</h4>
        </div>
<!--        <div class="centerbox">-->
<!--          <img src="../../assets/images/bottomLog.jpg">-->
<!--        </div>-->
        <div class="rightbox">
          <img src="../../assets/images/code.png">
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "my_index",
      data(){
          return{
            activeIndex2:'2',
            imagesbox:[
              {id:0,idView:require("../../assets/images/webbanner1.jpg")},
              {id:1,idView:require("../../assets/images/webbanner2.jpg")},
              {id:2,idView:require("../../assets/images/webbanner3.jpg")},
              {id:3,idView:require("../../assets/images/webbanner4.jpg")},
              {id:4,idView:require("../../assets/images/webbanner5.jpg")}],
  // 设置浏览器宽度
            screenWidth:0
          }
      },methods:{
          setSize:function() {
            this.bannerHeight=400/1920*this.screenWidth;
          },
         // 菜单里的方法
          handleSelect(key, keyPath) {
            console.log(key, keyPath);
          },

      },
      mounted() {
          this.screenWidth=window.innerWidth;
          this.setSize();
          //窗口带小改变时，调用一次
        window.onresize=() =>{
          this.screenWidth=window.innerWidth;
          this.setSize();
        }
      }
    }
</script>

<style scoped>
.container{
  position: relative;
  width: 100%;
  background-color:#f3f3f3;
}
a{
  text-decoration: none;
}

  .header{

    width: 100%;
    height: 100px;
    /*background-color: #e83e44;*/
    background-color: #e83e44;
  }
  /*header里面的左侧div*/
.left{

  position: absolute;
  top: 0;
  left: 200px;
  width: 120px;
  height: 100px;
}
/*header左侧div里面的图片大小*/
.left img{
  width: 100%;
  height: 100%;
}
.right{
  position: absolute;
  top: 0;
  right: 0;

  width:24%;
  height: 100px;
}

.right img{
  width: 100%;
  height: 100%;
}
/*菜单项大小*/

  .header .el-menu-demo{

    width: 700px;
    height: 100%;
    margin: 0px 320px;
    font-size: 18px;
  }


  .header .el-menu-demo .el-submenu{
    width: 130px;
    height: 60px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 40px;
    font-size: 18px;
    line-height: 60px;
    text-align: center;
}
.header .el-menu-demo .el-menu-item{
    width: 130px;
    height: 60px;
  color: white;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 40px;
  margin-right: auto;
  border-bottom: none;
  text-align: center;
   line-height: 60px;


  }
  .body{


    width: 100%;
    height: 680px;

    background-color: chartreuse;
  }

/*走马灯*/
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

 .body .image{
    width: 100%;
    height: inherit;
  }
 /*公司介绍*/
.company{

  width: 80%;
  height: 350px;
  margin: 0 auto;
  padding: 10%;
  /*background-color: #222d32;*/
  box-shadow: 2px 2px 1px 2px rgba(0,0,0,.3);
}
.comBody p{
  text-indent: 20px;
  font-size: 18px;
  color: dimgrey;
}
.company .comBody{
  width: 50%;
  height: 100%;
  margin: 0 auto;
  /*background-color: #42b983;*/

}
.company-introduce{
  width: 30%;
  height: 40px;
  margin: 20px auto;
  line-height: 40px;
  text-align: center;
  /*background-color: pink;*/

}
  /*产品介绍部分*/
.product{
  width: 100%;
  margin-top: 20px;
}
.product-introduce{
margin: 0 34%;
  width: 400px;
  height: 200px;

  text-align: center;
  line-height: 200px;
}
.item{
  float: left;
  width:30%;
  height: 300px;
  margin: 10px 20px;

  box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}
.item .img{
  width: 380px;
  height: 240px;
  background-color: white;
  margin: 10px;
}
.item .img img{
  width: 100%;
  height: 100%;
}
.item p{
  width: 380px;
  height: 40px;
  margin:0 10px;
  text-align: center;
  line-height: 40px;
  /*background-color: #42b983;*/
}
  /*产品介绍结束*/


/*footer开始*/
.footer{
  width: 100%;
  height: 230px;
  margin-top: 50px;
  background-color: #e83e44;
}
.footer .leftbox{
  float: left;
  width: 30%;
  height: 90%;
  margin-top: 10px;
  margin-left: 80px;
  color: white;

}
.footer .rightbox{
  float: right;
  margin-top: 10px;
  margin-right: 80px;
  width: 30%;
  height: 65%;
}
.rightbox img{
  width: 100%;
  height: 100%;
}
/*.footer .centerbox{*/
/*  float: left;*/
/*  height: 100%;*/
/*  width: 25%;*/
/*}*/
/*.centerbox img{*/
/*  height: 100%;*/
/*  width: 100%;*/
/*}*/

/*footer结束*/

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
